/*
 * @Author: bujichong
 * @Date: 2023-08-03 08:26:05
 * @LastEditors: MrGao
 * @LastEditTime: 2023-11-23 10:33:43
 * @Description: 水印
 * @FilePath: \vue3-element-admin\src\hooks\watermarks.ts
 */

interface WaterMarkOpt {
  text: string;
  cellWidth?: number;
  cellHeight?: number;
  textRotate?: number;
  opacity?: number;
  font?: string;
  top?: number;
  left?: number;
  zIndex?: number;
  color?: string;
}

interface WaterMark {
  set: (opt: WaterMarkOpt, isObserve: boolean) => void;
  out: () => void;
}

const watermark = {} as WaterMark;
let div: HTMLDivElement | null = null;
const setWatermark = (opt: WaterMarkOpt) => {
  const id = "1.23452384164.123412415";

  const o = Object.assign(
    {
      text: "",
      cellWidth: 240,
      cellHeight: 200,
      textRotate: -15,
      opacity: 0.08,
      font: "20px Vedana",
      top: 20,
      left: 0,
      zIndex: 10000,
    },
    opt || {}
  );

  if (div) {
    div.remove();
  }

  const can = document.createElement("canvas");
  can.width = o.cellWidth || 250;
  can.height = o.cellHeight || 250;

  const cans = can.getContext("2d") as CanvasRenderingContext2D;
  cans.rotate((o.textRotate * Math.PI) / 150);
  cans.font = o.font;
  cans.fillStyle = o.color ? o.color : "rgba(200, 200, 200, " + o.opacity + ")";
  cans.globalAlpha = o.opacity;
  cans.textAlign = "left";
  cans.textBaseline = "middle";
  cans.fillText(o.text, can.width / 16, can.height / 2);
  cans.fillText("副标题", can.width / 16, can.height / 2 + 24);
  div = document.createElement("div");
  div.id = id;
  div.style.pointerEvents = "none";
  div.style.top = o.top + "px";
  div.style.left = o.left + "px";
  div.style.position = "fixed";
  div.style.zIndex = o.zIndex + "";
  div.style.width = document.documentElement.clientWidth + "px";
  div.style.height = document.documentElement.clientHeight + "px";
  div.style.background =
    "url(" + can.toDataURL("image/png") + ") left top repeat";
  document.body.appendChild(div);
  return id;
};

// 该方法只允许调用一次
watermark.set = (opt: WaterMarkOpt, isObserve = false) => {
  console.log("isObserve", isObserve);
  setWatermark(opt);
  // setInterval(() => {
  //   if (document.getElementById(id) === null) {
  //     id = setWatermark(opt);
  //   }
  // }, 500);
  // const div = document.getElementById(id) as HTMLElement;
  if (isObserve) {
    const Observe = new MutationObserver((records) => {
      console.log("123", records);
      let flag = false;
      // records.forEach((item) => {
      for (const record of records) {
        if (record.target === div) {
          console.log("111111111111111111");
          flag = true;
          break;
        }
        for (let i = 0; i < record.removedNodes.length; i++) {
          const dom1 = record.removedNodes[i] as HTMLElement;
          if (dom1 === div) {
            flag = true;
            break;
          }
        }
      }
      console.log(flag);
      if (flag) {
        setWatermark(opt);  
      }
    });
    Observe.observe(div as HTMLElement, {
      childList: true,
      attributes: true,
      subtree: true,
    });
  }
  window.onresize = () => {
    setWatermark(opt);
  };
};

const outWatermark = (id: string) => {
  if (document.getElementById(id) !== null) {
    const div = document.getElementById(id) as HTMLElement;
    div.style.display = "none";
  }
};
watermark.out = () => {
  const str = "1.23452384164.123412415";
  outWatermark(str);
};

export default watermark;
